स्वागत! मेरी Vuejs एम्स्टर्डम सम्मेलन 2022 सारांश श्रृंखला के पांचवें भाग में आपको देखकर खुशी हुई, जिसमें मैं आपके साथ सभी वार्ताओं का सारांश साझा करता हूं। आप मेरी जेएसवर्ल्ड सम्मेलन 2022 सारांश श्रृंखला (चार भागों में) पढ़ सकते हैं, जहां मैंने पहले दिन की सभी वार्ताओं का सारांश दिया था। आप मेरे ब्लॉग में Vue एम्स्टर्डम सम्मेलन 2022 की पिछली वार्ता भी पा सकते हैं। यहां (आवर्ती) परिचय ढाई साल के बाद, 1 और 3 जून के बीच JSWorld और Vue एम्स्टर्डम सम्मेलन थिएटर एम्स्टर्डम में वापस आ गए, और मुझे पहली बार इस सम्मेलन में भाग लेने का मौका मिला। मैंने बहुत सी चीजें सीखीं, कई अद्भुत लोगों से मुलाकात की, महान डेवलपर्स के साथ बात की, और बहुत अच्छा समय बिताया। पहले दिन JSWorld सम्मेलन आयोजित किया गया था, और दूसरे और तीसरे दिन, Vue एम्स्टर्डम। सम्मेलन महान वक्ताओं के साथ जानकारी से भरा था, जिनमें से प्रत्येक ने मुझे कुछ मूल्यवान सिखाया। वे सभी अपने ज्ञान और जानकारी को अन्य डेवलपर्स के साथ साझा करना चाहते थे। इसलिए मैंने सोचा कि यह बहुत अच्छा होगा अगर मैं इसे साझा करना जारी रख सकूं और दूसरों को इसका इस्तेमाल करने में मदद कर सकूं। सबसे पहले, मैंने कुछ नोट्स या स्लाइड साझा करने की कोशिश की, लेकिन मुझे लगा कि यह काफी अच्छा नहीं था, कम से कम उतना अच्छा नहीं जितना कि स्पीकर ने मेरे साथ साझा किया। इसलिए मैंने प्रत्येक भाषण को फिर से देखने, उनमें गहराई तक जाने, खोज करने, नोट्स लेने और उन्हें उनकी स्लाइडों और यहां तक कि उनके भाषण में उनके सटीक शब्दों के साथ संयोजित करने और फिर इसे आपके साथ साझा करने का निर्णय लिया ताकि जो मैं आपके साथ साझा कर रहा हूं वह कम से कम उसी स्तर पर जो मैंने उनसे सीखा। एक बहुत ही महत्वपूर्ण बिंदु और मैंने केवल उन्हें सीखने की कोशिश की है ताकि मैं उन्हें इन लेखों में बदल सकूं। यहां तक कि इसका मतलब है कि अगर आप कुछ नया सीखते हैं, तो यह उनके प्रयासों के कारण होता है। (तो अगर आप कुछ गलत सूचना देखते हैं तो उन्हें दोष दें, मुझे नहीं, ठीक है? xD) इन चंद लेखों के दौरान आपने जो कुछ भी पढ़ा, वह स्वयं वक्ता के प्रयास और समय का परिणाम है, इन लेखों में लिखे गए कई वाक्य ठीक वही हैं जो उन्होंने कहा या स्लाइड में लिखा है। अंतिम लेकिन कम से कम, मैं कुछ भाषणों में हर तकनीकी विवरण या लाइव कोडिंग में खुदाई नहीं कर सकता। लेकिन अगर आप रुचि रखते हैं और अधिक जानकारी चाहते हैं, तो मुझे बताएं और मैं अलग से एक और विस्तृत लेख लिखने की कोशिश करूंगा। साथ ही, उनका ट्विटर/लिंक्डिन देखना न भूलें। आप सम्मेलन का कार्यक्रम देख सकते हैं। यहां पुन: प्रयोज्य विजेट जो काम करते हैं! - सीवीएस हेल्थ में एक्सेसिबिलिटी ट्रेनिंग के प्रमुख और एक्सेसिबिलिटी इंजीनियरिंग के सीनियर मैनेजर मारिया लैमार्डो Vue.js एक अद्भुत ढांचा है जो आपको पुन: प्रयोज्य घटकों को जल्दी से बनाने की अनुमति देता है। हम ARIA (एक्सेसिबल रिच इंटरनेट एप्लिकेशन) की मदद से सुलभ पुन: प्रयोज्य विजेट बनाने के लिए इसका लाभ उठा सकते हैं। ARIA भूमिकाओं और विशेषताओं का उपयोग करके, हम अतिरिक्त शब्दार्थ प्रदान करके कुछ तत्वों की पहुंच में सुधार कर सकते हैं। इस वार्ता में, हम विनिर्देशों का पालन करने और सभी के लिए काम करने वाले सुलभ और पुन: प्रयोज्य टैब, अकॉर्डियन, टॉगल बटन और मोडल डायलॉग बनाने के तरीके के बारे में जानेंगे! मॉडल ARIA के बारे में वे सभी चीज़ें जो आपको जानने की ज़रूरत है, में अच्छी तरह से प्रलेखित हैं और इसे पढ़ने की अनुशंसा की जाती है, लेकिन यहाँ इसका एक सार संस्करण है। W3C मॉडल डिजाइन विचार इसमें एक बटन होना चाहिए जो डायलॉग को बंद कर दे। संवाद के बाहर की सामग्री को धूसर पृष्ठभूमि की तरह दृश्य शैली के साथ छिपाया जाना चाहिए। सुनिश्चित करें कि आप उपयोगकर्ताओं को संवाद के बाहर सामग्री के साथ सहभागिता करने से रोकते हैं। मोडल ओपनिंग फोकस इंटरेक्शन जब कोई संवाद खुलता है, तो सामग्री को पढ़ने में आसान बनाने और यह सुनिश्चित करने के लिए कि सभी सामग्री दृश्य में रहती है, या बातचीत के दौरान सबसे अधिक बार उपयोग किए जाने वाले तत्व को सुनिश्चित करने के लिए या तो पहले फ़ोकस करने योग्य तत्व, या संवाद के शीर्ष पर एक स्थिर तत्व पर फ़ोकस सेट किया जा सकता है। जानकारी प्रदान करने या प्रसंस्करण जारी रखने तक सीमित हैं। आप किसी ऐसी चीज़ पर ध्यान केंद्रित नहीं करना चाहते जो उपयोगकर्ता के लिए विनाशकारी हो, उदाहरण के लिए, मान लें कि आपके पास एक इंटरैक्शन है जहां आप अपना खाता हटाने के लिए एक मोडल खोलते हैं। आप "हां, मेरा खाता हटाएं" पर पहला ध्यान केंद्रित नहीं करना चाहते हैं। मोडल क्लोजिंग फोकस इंटरेक्शन जब कोई संवाद बंद हो जाता है, तो उस तत्व पर ध्यान केंद्रित किया जाता है जिसने संवाद को आमंत्रित किया है, या जब इसका कोई मतलब नहीं है, तो आप एक अलग तत्व पर ध्यान केंद्रित कर सकते हैं, जैसे एक तत्व जो तार्किक कार्यप्रवाह प्रदान करता है यदि लागू करने वाला तत्व अब मौजूद नहीं है, या अगले तत्व पर यदि संवाद कार्य पूर्ण होने के बाद कार्यप्रवाह में कोई अनुवर्ती चरण है, विशेष रूप से यदि तुरंत संवाद को फिर से खोलना बहुत असंभव है। मोडल कीबोर्ड इंटरेक्शन टैब मोडल में फ़ोकस को अगले टैब करने योग्य तत्व पर ले जाता है, पहले तत्व के चारों ओर लूपिंग करता है शिफ्ट + टैब मोडल में पिछले टैब करने योग्य तत्व पर ध्यान केंद्रित करता हैआखिरी तत्व के आसपास लूपिंग बच निकलना संवाद बंद करता है मॉडल तकनीकी विचार डायलॉग कंटेनर में होना चाहिए: की भूमिका संवाद सत्य पर सेट। एरिया-मोडल या -लेबल संवाद शीर्षक का जिक्र करते हुए, यह सहायक तकनीकों को यह पता लगाने में मदद करेगा कि इस तत्व का नामकरण क्या होगा। एरिया-लेबल एरिया वैकल्पिक रूप से आप किसी भी विवरण के लिए सेट कर सकते हैं। एरिया-डिस्क्राइब बाय संवाद को संचालित करने के लिए आवश्यक सभी तत्व उस तत्व के वंशज होने चाहिए जिसकी संवाद भूमिका है। <div role="dialog" aria-modal="true" aria-labelledby="title" aria-describedby="description" > <h2 id="title">Title of the dialog</h2> <p id="description">Information provided by the dialog.</p> <button aria-label="close">×</button> </div> मैक पर, आप कमांड + F5 पर क्लिक करके वॉयस ओवर को सक्रिय कर सकते हैं जो कि डिफ़ॉल्ट मैक स्क्रीन रीडर है, और फिर आप अपने पेज पर जा सकते हैं और इसका परीक्षण कर सकते हैं। क्रोम देव-टूल्स में भी एक एक्सेसिबिलिटी टैब होता है जिसमें कुछ कूल एक्सेसिबिलिटी जानकारी होती है। इसके साथ, आप को खोल सकते हैं और इसे देख सकते हैं, और कोड है। इस उदाहरण यहां टॉगल बटन यदि आप पूरी जानकारी चाहते हैं तो आप इसे वेबसाइट पर पा सकते हैं। W3C बटन एक एक विजेट है जो उपयोगकर्ताओं को एक क्रिया या घटना को ट्रिगर करने में सक्षम बनाता है, जैसे कि एक फॉर्म जमा करना, एक संवाद खोलना, एक क्रिया को रद्द करना, या एक डिलीट ऑपरेशन करना। बटन सामान्य बटन विजेट के अलावा, WAI-ARIA 2 अन्य प्रकार के बटनों का समर्थन करता है: टॉगल बटन मेनू बटन टॉगल बटन डिजाइन विचार एक दो-राज्य बटन जिसे या तो बंद किया जा सकता है (दबाया नहीं जा सकता) या चालू (दबाया) जा सकता है। सहायक तकनीकों को यह बताने के लिए कि एक बटन एक टॉगल बटन है, विशेषता के लिए एक मान निर्दिष्ट करें। aria-pressed जब टॉगल की स्थिति बदलती है तो उस पर लगे लेबल को नहीं बदलना चाहिए; यदि लेबल डिज़ाइन में बदलता है, तो aria-pressed विशेषता की कोई आवश्यकता नहीं है। टॉगल बटन फोकस हैंडलिंग यदि बटन को सक्रिय करना वर्तमान संदर्भ को खारिज नहीं करता है, तो सक्रियण के बाद बटन पर ध्यान केंद्रित रहता है। यदि बटन को सक्रिय करने से डायलॉग खुलता या बंद होता है, तो डायलॉग पैटर्न का पालन करें। यदि बटन क्रिया किसी संदर्भ परिवर्तन को इंगित करती है, तो आप उस क्रिया के लिए फ़ोकस को प्रारंभिक बिंदु पर ले जा सकते हैं यदि बटन को शॉर्टकट कुंजी के साथ सक्रिय किया जाता है, तो फोकस आमतौर पर उस संदर्भ में रहता है जहां से शॉर्टकट कुंजी सक्रिय की गई थी टॉगल बटन कीबोर्ड इंटरेक्शन प्रवेश करना बटन को सक्रिय करता है अंतरिक्ष बटन को सक्रिय करता है टॉगल बटन तकनीकी विचार टॉगल बटन में की भूमिका होनी चाहिए। बटन सुनिश्चित करें कि बटन का एक सुलभ नाम है। आप किसी भी विवरण के लिए सेट कर सकते हैं। एरिया-डिस्क्राइब बाय यदि क्रिया अनुपलब्ध है, तो आप सेट को सत्य में जोड़ सकते हैं। एरिया-अक्षम टॉगल बटन में अवस्था होती है। एरिया-प्रेस्ड <button aria-pressed="false"> Mute </button> यहां एक अच्छा है जिसे आप देख सकते हैं और कोड है। उदाहरण यहां accordions पूरा दस्तावेज है। आइए एक नजर डालते हैं इसके मुख्य बिंदुओं पर। यहां Accordions डिजाइन विचार इंटरैक्टिव शीर्षकों का लंबवत रूप से स्टैक किया गया सेट जिसमें प्रत्येक में एक शीर्षक, सामग्री स्निपेट या सामग्री के एक अनुभाग का प्रतिनिधित्व करने वाला थंबनेल होता है अकॉर्डियन हैडर: सामग्री के किसी अनुभाग का प्रतिनिधित्व करने वाला लेबल या थंबनेल जो सामग्री के अनुभाग को दिखाने के लिए और कुछ कार्यान्वयनों में नियंत्रण के रूप में भी कार्य करता है। अकॉर्डियन पैनल: एक अकॉर्डियन हेडर से संबद्ध सामग्री का अनुभाग। अकॉर्डियन कीबोर्ड इंटरेक्शन एंटर या स्पेस संबद्ध संक्षिप्त पैनल का विस्तार करता है, वैकल्पिक रूप से अन्य खोले गए पैनल को संक्षिप्त करता है संबद्ध विस्तृत पैनल को संक्षिप्त करता है; यदि कार्यान्वयन अनुमति देता है। टैब फ़ोकस को अगले फ़ोकस करने योग्य तत्व पर ले जाता है शिफ्ट + टैब फ़ोकस को पिछले फ़ोकस करने योग्य तत्व पर ले जाता है नीचे तीर (वैकल्पिक) अकॉर्डियन हेडर से फोकस को अगले अकॉर्डियन हेडर पर ले जाता है वैकल्पिक रूप से पहले अकॉर्डियन हेडर पर वापस जाता है। ऊपर तीर (वैकल्पिक) अकॉर्डियन हेडर से फोकस को पिछले अकॉर्डियन हेडर पर ले जाता है वैकल्पिक रूप से पिछले अकॉर्डियन हेडर पर वापस जाता है होम (वैकल्पिक) एक अकॉर्डियन हेडर से फोकस को पहले अकॉर्डियन हेडर पर ले जाता है अंत (वैकल्पिक) अकॉर्डियन हेडर से फोकस को लास्ट अकॉर्डियन हेडर पर ले जाता है Accordions तकनीकी विचार सुनिश्चित करें कि प्रत्येक अकॉर्डियन हेडर बटन में है: एक शीर्षक में लिपटे संबंधित अकॉर्डियन पैनल सामग्री की आईडी पर सेट है aria-नियंत्रण यदि संबंधित पैनल सामग्री दिखाई दे रही है तो सत्य पर सेट करें एरिया-विस्तारित यदि ढहने वाले अकॉर्डियन की अनुमति नहीं है तो सही पर सेट करें aria-अक्षम प्रत्येक पैनल सामग्री में संबंधित शीर्षलेख बटन के अनुसार और होता है (वैकल्पिक) भूमिका क्षेत्र एरिया-लेबल उन परिस्थितियों में क्षेत्र की भूमिका का उपयोग करने से बचें जो बहुत अधिक ऐतिहासिक क्षेत्र बनाती हैं अकॉर्डियन कोड उदाहरण <h3> <button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id" > Accordion 1 </button> </h3> <div id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel" > Content Placeholder </div> यहां एक अच्छा और उसका है। उदाहरण कोड टैब आप पर Tabs का पूरा दस्तावेज़ीकरण देख सकते हैं। W3C टैब डिजाइन विचार टैब सामग्री के स्तरित अनुभागों का एक समूह है, जिसे टैब पैनल के रूप में जाना जाता है, जो एक समय में सामग्री के एक पैनल को प्रदर्शित करता है। एक तत्व में निहित टैब तत्वों का एक सेट टैब सूची: टैबलिस्ट टैब सूची में एक तत्व जो किसी एक टैब पैनल के लिए एक लेबल के रूप में कार्य करता है और उस पैनल को प्रदर्शित करने के लिए सक्रिय किया जा सकता है टैब: वह तत्व जिसमें टैब से जुड़ी सामग्री होती है टैब पैनल: यह अनुशंसा की जाती है कि टैब तब तक स्वचालित रूप से सक्रिय हो जाते हैं जब वे फ़ोकस प्राप्त करते हैं, जब तक कि उनके संबद्ध टैब पैनल ध्यान देने योग्य विलंबता के बिना प्रदर्शित होते हैं। टैब कीबोर्ड इंटरेक्शन टैब जब उपयोगकर्ता टैब सूची में जाता है तो स्थान सक्रिय टैब तत्व पर ध्यान केंद्रित करता है बायां तीर (क्षैतिज टैब) ऊपर तीर (ऊर्ध्वाधर टैब) फ़ोकस को पिछले टैब पर ले जाता है; अंतिम टैब पर लूप करनावैकल्पिक रूप से, नए फ़ोकस किए गए टैब को सक्रिय करता है दायां तीर (क्षैतिज टैब) डाउन एरो (वर्टिकल टैब्स) फ़ोकस को अगले टैब पर ले जाता है; पहले टैब पर लूप करना वैकल्पिक रूप से, नए फ़ोकस किए गए टैब को सक्रिय करता है स्पेस या एंटर टैब को सक्रिय करता है यदि यह फोकस पर स्वचालित रूप से सक्रिय नहीं किया गया था शिफ्ट + F10 जब फ़ोकस उस टैब पर होता है जिसमें संबद्ध पॉपअप मेनू होता है, तो मेनू खोलता है टैब वैकल्पिक कीबोर्ड इंटरेक्शन घर (वैकल्पिक) फ़ोकस को पहले टैब पर ले जाता हैवैकल्पिक रूप से, नए फ़ोकस किए गए टैब को सक्रिय करता है अंत (वैकल्पिक) फ़ोकस को अंतिम टैब पर ले जाता हैवैकल्पिक रूप से, नए फ़ोकस किए गए टैब को सक्रिय करता है हटाएं (वैकल्पिक) यदि हटाने की अनुमति है, तो वर्तमान टैब तत्व और उससे जुड़े टैब पैनल को हटाता (बंद) करता है, बंद किए गए टैब के बाद वाले टैब पर फ़ोकस सेट करता है, और वैकल्पिक रूप से नए फ़ोकस किए गए टैब को सक्रिय करता है टैब तकनीकी विचार टैब के सेट वाले तत्व में या होना चाहिए। टैबलिस्ट की भूमिका: aria-labelledby aria-label एक टैब के रूप में कार्य करने वाले तत्व में संबद्ध टैबपैनल के साथ पेयर होना चाहिए, सक्रिय टैब में स्टेट एरिया-चयनित सही पर सेट होना चाहिए; अन्य सभी टैब झूठे पर सेट हैं। टैब की भूमिका: एरिया-कंट्रोल और यदि टैब तत्व में पॉप-अप मेनू है तो इसमें aria-haspopup संपत्ति या तो मेनू या सत्य पर सेट होनी चाहिए। किसी टैब के लिए सामग्री पैनल वाले तत्व में aria-लेबल द्वारा संबद्ध टैब से युग्मित होना चाहिए, और aria-अभिविन्यास को लंबवत या क्षैतिज (डिफ़ॉल्ट) पर सेट करना चाहिए। Tabpanel की भूमिका: टैब कोड उदाहरण <div role="tablist" aria-label="Tabs Example"> <button role="tab" aria-selected="true" aria-controls="tab1-content" id="tab1" >Tab 1 </button> <button role="tab" aria-selected="false" aria-controls="tab2-content" id="tab2" tabindex="-1" >Tab 2</button> </div> <div tabindex="0" role="tabpanel" aria-labelledby="tab1" id="tab1-content"> <p>Content 1</p> </div> <div tabindex="0" role="tabpanel" aria-labelledby="tab2" id="tab2-content"> <p>Content 2</p> </div> यहां एक अच्छा और उसका है। उदाहरण कोड साधन ARIA संलेखन अभ्यास मार्गदर्शिका वेब सामग्री अभिगम्यता दिशानिर्देश (डब्ल्यूसीएजी) 2.1 आप यहां विभिन्न घटकों के साथ एक संपूर्ण Vue कोड उदाहरण पा सकते हैं: https://github.com/mlama007/Widgets वार्ता का अंत पांचवीं मुझे आशा है कि आपने इस भाग का आनंद लिया और यह आपके लिए उतना ही मूल्यवान हो सकता है जितना कि यह मेरे लिए था। अगले कुछ दिनों में, मैं बाकी की बातचीत आपके साथ साझा करूँगा। बने रहें… भी प्रकाशित हो चुकी है।. यहाँ
